/* ==========================================================
   FOLIERUNG
   RG Digitaldruckforum Göhringer
========================================================== */


body#folierung {
  --fo-red: #f10d1b;
  --fo-red-dark: #c9000d;

  --fo-bg: #101315;
  --fo-bg-deep: #090b0c;
  --fo-bg-soft: #171b1e;

  --fo-text: #f6f6f3;
  --fo-muted: rgba(255, 255, 255, .66);

  --fo-line: rgba(255, 255, 255, .10);
  --fo-line-strong: rgba(255, 255, 255, .19);

  min-width: 320px;
  overflow-x: hidden;

  color: var(--fo-text);
  background: var(--fo-bg);
}


body#folierung img {
  display: block;
  max-width: 100%;
}


body#folierung ::selection {
  color: #fff;
  background: var(--fo-red);
}



/* ==========================================================
   GRUNDGERÜST
========================================================== */

.fo-page {
  width: 100%;
  padding-top: 92px;
  overflow: hidden;

  background: var(--fo-bg);
}


.fo-shell {
  width: 100%;
  margin: 0;

  padding-right: var(--site-gutter);
  padding-left: var(--site-gutter);
}



/* ==========================================================
   BREADCRUMB
========================================================== */

.product-breadcrumb {
  min-height: 54px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: rgba(255, 255, 255, .48);

  font-size: .76rem;
  font-weight: 650;
}


.product-breadcrumb a {
  color: inherit;
  text-decoration: none;

  transition: color .25s ease;
}


.product-breadcrumb a:hover {
  color: var(--fo-red);
}


.product-breadcrumb span {
  color: rgba(255, 255, 255, .24);
}


.product-breadcrumb strong {
  color: #fff;
}



/* ==========================================================
   HERO
========================================================== */

.fo-hero {
  position: relative;

  width: 100%;
  min-height: 650px;

  overflow: hidden;
  isolation: isolate;

  background: #080a0b;
}



/* Bild */

.fo-hero-bg {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 0;

  width: 62%;
  height: 100%;

  object-fit: cover;
  object-position: center 43%;

  opacity: .92;

  filter:
    brightness(.96)
    contrast(1.04);

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, .9) 76%,
      rgba(0, 0, 0, .36) 91%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, .9) 76%,
      rgba(0, 0, 0, .36) 91%,
      transparent 100%
    );

  transition:
    transform 7s ease,
    filter .7s ease;
}


.fo-hero:hover .fo-hero-bg {
  transform: scale(1.012);

  filter:
    brightness(1.04)
    contrast(1.04);
}



/* Overlay */

.fo-hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 7, .99) 0%,
      rgba(5, 6, 7, .98) 29%,
      rgba(5, 6, 7, .86) 44%,
      rgba(5, 6, 7, .35) 65%,
      rgba(5, 6, 7, .03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .05) 0%,
      transparent 55%,
      rgba(0, 0, 0, .60) 100%
    );
}



/* Inhalt */

.fo-hero-inner {
  position: relative;
  z-index: 2;

  min-height: 650px;

  padding-top: 48px;
  padding-bottom: 34px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}



/* Services */

.fo-hero-services {
  width: fit-content;

  margin: 0 0 38px;
  padding: 0;

  display: flex;
  flex-wrap: wrap;

  gap: 38px;

  list-style: none;

  font-size: .8rem;
  font-weight: 850;

  letter-spacing: .09em;
  text-transform: uppercase;
}


.fo-hero-service {
  position: relative;

  color: rgba(255, 255, 255, .42);

  transition:
    color .35s ease,
    transform .35s ease;
}


.fo-hero-service::after {
  content: "";

  position: absolute;

  bottom: -8px;
  left: 0;

  width: 0;
  height: 2px;

  background: var(--fo-red);

  transition: width .35s ease;
}


.fo-hero-service.active {
  color: var(--fo-red);

  transform: translateY(-2px);
}


.fo-hero-service.active::after {
  width: 100%;
}



/* Hero Text */

.fo-hero-content {
  width: min(650px, 52%);
}


.fo-eyebrow,
.fo-kicker {
  display: block;

  margin: 0 0 15px;

  color: var(--fo-red);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .18em;
  text-transform: uppercase;
}


.fo-hero-content h1 {
  margin: 0 0 28px;

  color: #fff;

  font-size:
    clamp(
      3rem,
      4.5vw,
      5.1rem
    );

  font-weight: 700;

  line-height: .95;
  letter-spacing: -.065em;
}


.fo-color-word {
  display: block;

  min-height: 1.05em;

  color: var(--fo-red);

  transition:
    opacity .28s ease,
    transform .28s ease;
}


.fo-color-word.is-changing {
  opacity: 0;

  transform: translateY(10px);
}


.fo-hero-text {
  max-width: 630px;

  margin: 0;

  color: rgba(255, 255, 255, .8);

  font-size:
    clamp(
      .94rem,
      1.02vw,
      1.06rem
    );

  line-height: 1.72;
}



/* ==========================================================
   HERO FAKTEN
   Aufbau wie bei der Druckerei
========================================================== */

.fo-hero-facts {
  width: min(920px, 100%);

  margin-top: 52px;
  padding-top: 28px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-top: 1px solid rgba(255, 255, 255, .16);
}



/* ==========================================================
   EINZELNER FAKTENBLOCK
========================================================== */

.fo-hero-fact {
  position: relative;

  min-height: 94px;

  padding: 15px 25px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);

  align-items: start;

  gap: 14px;

  transition:
    transform .35s ease,
    background .35s ease;
}



/* erster Block beginnt bündig links */

.fo-hero-fact:first-child {
  padding-left: 0;
}



/* ==========================================================
   TRENNLINIEN
========================================================== */

.fo-hero-fact:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 15px;
  right: 0;
  bottom: 15px;

  width: 1px;

  background: rgba(255, 255, 255, .14);
}



/* ==========================================================
   ICON
========================================================== */

.fo-hero-fact-icon {
  min-width: 34px;

  display: block;

  color: var(--red-light);

  font-size: 1.08rem;
  font-weight: 900;
}


.fo-hero-fact-icon svg {
  width: 18px;
  height: 18px;

  display: block;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}



/* Stern bei "Individuelle Gestaltung" gefüllt */

.fo-hero-fact:first-child
.fo-hero-fact-icon svg {
  fill: currentColor;
  stroke: none;
}



/* ==========================================================
   TEXT
========================================================== */

.fo-hero-fact-copy {
  min-width: 0;
}


.fo-hero-fact strong {
  display: block;

  margin-bottom: 5px;

  color: var(--white);

  font-size: .9rem;
}


.fo-hero-fact p {
  margin: 0;

  color: rgba(255, 255, 255, .63);

  font-size: .73rem;

  line-height: 1.45;
}



/* ==========================================================
   HOVER
   genau wie bei der Druckerei:
   nur leicht hoch + dezenter roter Verlauf
========================================================== */

.fo-hero-fact:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, .08),
      transparent
    );
}



/* ==========================================================
   SEKTIONEN
========================================================== */

.fo-section {
  position: relative;

  padding: 98px 0;

  background: var(--fo-bg);
}


.fo-section + .fo-section {
  border-top:
    1px solid
    rgba(255, 255, 255, .055);
}


.fo-section-intro,
.fo-detail-heading {
  max-width: 900px;

  margin: 0 0 50px;
}


.fo-section-intro h2,
.fo-detail-heading h2,
.fo-faq-intro h2,
.fo-final-copy h2 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(
      2.35rem,
      4vw,
      4.45rem
    );

  font-weight: 700;

  line-height: .98;
  letter-spacing: -.045em;
}


.fo-section-intro > p:last-child,
.fo-detail-heading > p:last-child {
  max-width: 720px;

  margin: 20px 0 0;

  color: var(--fo-muted);

  line-height: 1.72;
}



/* ==========================================================
   FOLIERUNG IM EINSATZ
========================================================== */

.fo-use-section {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(241, 13, 27, .07),
      transparent 32%
    ),
    var(--fo-bg);
}


.fo-use-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      24px,
      3vw,
      46px
    );

  align-items: end;
}


.fo-use-item {
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
}


.fo-use-image {
  position: relative;

  width: 100%;

  margin: 0 0 26px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius: 18px;

  background: #0a0c0d;

  box-shadow:
    0 24px 55px
    rgba(0, 0, 0, .24);
}


.fo-use-item--01 .fo-use-image {
  height: 440px;
}


.fo-use-item--02 .fo-use-image {
  height: 370px;
}


.fo-use-item--03 .fo-use-image {
  height: 310px;
}


.fo-use-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform .6s ease,
    filter .6s ease;
}


.fo-use-item--01
.fo-use-image img {
  object-position: center 46%;
}


.fo-use-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 58%,
      rgba(9, 11, 12, .15) 72%,
      rgba(9, 11, 12, .62) 100%
    );
}


.fo-use-item:hover
.fo-use-image img {
  transform: scale(1.045);

  filter: brightness(1.04);
}


.fo-use-content {
  min-height: 215px;

  flex: 1;

  padding: 0 5px 4px;
}


.fo-use-number {
  display: block;

  margin-bottom: 9px;

  color: var(--fo-red);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .13em;
}


.fo-use-label {
  margin: 0 0 10px;

  color: var(--fo-red);

  font-size: .66rem;
  font-weight: 900;

  letter-spacing: .14em;
  text-transform: uppercase;
}


.fo-use-content h3 {
  margin: 0 0 13px;

  color: var(--fo-text);

  font-size:
    clamp(
      1.45rem,
      2vw,
      2rem
    );

  line-height: 1.13;

  transition: color .3s ease;
}


.fo-use-item:hover
.fo-use-content h3 {
  color: var(--fo-red);
}


.fo-use-content > p:last-child {
  max-width: 470px;

  margin: 0;

  color: var(--fo-muted);

  font-size: .86rem;

  line-height: 1.62;
}



/* ==========================================================
   PROZESS
========================================================== */

.fo-process-section {
  background: var(--fo-bg-deep);
}


.fo-process-timeline {
  --fo-process-progress: 0%;

  position: relative;

  width: 100%;
  max-width: 1220px;

  margin-top: 22px;

  padding-left: 92px;

  display: grid;

  gap: 25px;
}


.fo-process-line {
  position: absolute;

  z-index: 1;

  top: 32px;
  bottom: 32px;

  left: 27px;

  width: 2px;

  overflow: hidden;

  background:
    rgba(255, 255, 255, .11);
}


.fo-process-progress {
  display: block;

  width: 100%;

  height:
    var(--fo-process-progress);

  background: var(--fo-red);

  box-shadow:
    0 0 11px
    rgba(241, 13, 27, .52);

  transition:
    height .7s
    cubic-bezier(.22, .7, .23, 1);
}


.fo-process-step {
  --fo-step-offset: 0px;

  position: relative;

  z-index: 2;

  min-width: 0;
}


.fo-process-step:nth-of-type(2) {
  --fo-step-offset: 30px;
}


.fo-process-step:nth-of-type(3) {
  --fo-step-offset: 60px;
}


.fo-process-step:nth-of-type(4) {
  --fo-step-offset: 30px;
}


.fo-process-number {
  position: absolute;

  top: 50%;
  left: -92px;

  width: 56px;
  height: 56px;

  padding: 0;

  display: grid;
  place-items: center;

  transform: translateY(-50%);

  border: 0;

  color: transparent;
  background: var(--fo-bg-deep);

  cursor: pointer;

  font-size: 1.65rem;
  font-weight: 900;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, .28);

  transition:
    transform .4s ease,
    filter .4s ease,
    -webkit-text-stroke-color .4s ease;
}


.fo-process-step.is-active
.fo-process-number,
.fo-process-step:hover
.fo-process-number {
  color: transparent;

  -webkit-text-stroke:
    1.3px
    var(--fo-red);

  filter:
    drop-shadow(
      0 0 6px
      rgba(241, 13, 27, .55)
    );

  transform:
    translateY(-50%)
    scale(1.08);
}


.fo-process-card {
  position: relative;

  width:
    calc(
      100% -
      var(--fo-step-offset)
    );

  min-height: 245px;

  margin-left:
    var(--fo-step-offset);

  padding: 24px;

  display: grid;

  grid-template-columns:
    minmax(280px, .72fr)
    minmax(330px, 1fr);

  gap:
    clamp(
      30px,
      5vw,
      70px
    );

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--fo-line);

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .025),
      rgba(255, 255, 255, .008)
    );

  transition:
    transform .45s ease,
    border-color .45s ease,
    background .45s ease,
    box-shadow .45s ease;
}


.fo-process-card::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background: var(--fo-red);

  opacity: .2;
}


.fo-process-step.is-active
.fo-process-card,
.fo-process-step:hover
.fo-process-card {
  transform:
    translateX(8px)
    translateY(-3px);

  border-color:
    rgba(241, 13, 27, .48);

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(241, 13, 27, .12),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .035),
      rgba(255, 255, 255, .008)
    );

  box-shadow:
    0 20px 48px
    rgba(0, 0, 0, .22);
}


.fo-process-step.is-active
.fo-process-card::before,
.fo-process-step:hover
.fo-process-card::before {
  opacity: 1;
}


.fo-process-image {
  height: 215px;

  margin: 0;

  overflow: hidden;

  border-radius: 14px;

  background: #0d0f10;
}


.fo-process-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform .45s ease;
}


.fo-process-step.is-active
.fo-process-image img,
.fo-process-step:hover
.fo-process-image img {
  transform: scale(1.035);
}


.fo-process-label {
  display: block;

  margin-bottom: 10px;

  color: var(--fo-red);

  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .14em;
  text-transform: uppercase;
}


.fo-process-copy h3 {
  margin: 0 0 16px;

  color: #fff;

  font-size:
    clamp(
      1.5rem,
      2vw,
      2rem
    );
}


.fo-process-copy ul {
  margin: 0;

  padding-left: 19px;

  color: var(--fo-muted);

  font-size: .84rem;

  line-height: 1.7;
}


.fo-process-copy li + li {
  margin-top: 4px;
}



/* ==========================================================
   FOLIENARTEN
========================================================== */

.fo-material-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, .42fr)
    minmax(0, 1fr);

  gap:
    clamp(
      32px,
      5vw,
      74px
    );
}


.fo-material-tabs {
  display: grid;

  align-content: start;

  gap: 10px;
}


.fo-material-tab {
  width: 100%;

  padding: 20px 22px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 6px;

  border:
    1px solid
    var(--fo-line);

  border-radius: 14px;

  color: #fff;

  background:
    rgba(255, 255, 255, .02);

  text-align: left;

  cursor: pointer;

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}


.fo-material-tab span {
  font-size: .96rem;
  font-weight: 800;
}


.fo-material-tab small {
  color: var(--fo-muted);

  font-size: .72rem;
}


.fo-material-tab:hover,
.fo-material-tab.is-active {
  transform: translateX(5px);

  border-color:
    rgba(241, 13, 27, .46);

  background:
    rgba(241, 13, 27, .07);
}


.fo-material-tab.is-active span {
  color: var(--fo-red);
}


.fo-material-panels {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  border:
    1px solid
    var(--fo-line);

  border-radius: 22px;

  background: #080a0b;
}


.fo-material-panel {
  position: relative;

  width: 100%;
  min-height: 520px;

  overflow: hidden;
}


.fo-material-panel[hidden] {
  display: none;
}


.fo-material-panel img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.fo-material-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .05) 25%,
      rgba(0, 0, 0, .80) 100%
    );
}


.fo-material-copy {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 2;

  max-width: 620px;

  padding: 42px;
}


.fo-material-copy > span {
  display: block;

  margin-bottom: 10px;

  color: var(--fo-red);

  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .14em;
  text-transform: uppercase;
}


.fo-material-copy h3 {
  margin: 0 0 12px;

  color: #fff;

  font-size:
    clamp(
      1.8rem,
      3vw,
      3rem
    );
}


.fo-material-copy p {
  max-width: 520px;

  margin: 0;

  color: rgba(255, 255, 255, .72);

  line-height: 1.65;
}



/* ==========================================================
   DETAIL ZOOM
========================================================== */

.fo-detail-section {
  background: var(--fo-bg-deep);
}


.fo-detail-stage {
  display: grid;

  grid-template-columns:
    minmax(310px, .42fr)
    minmax(0, 1fr);

  gap:
    clamp(
      40px,
      6vw,
      90px
    );

  align-items: stretch;
}



/* Informationen */

.fo-detail-features {
  display: flex;
  flex-direction: column;

  justify-content: center;

  border-top:
    1px solid
    var(--fo-line);
}


.fo-detail-feature {
  position: relative;

  width: 100%;

  padding: 24px 10px 24px 0;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap: 15px;

  border: 0;

  border-bottom:
    1px solid
    var(--fo-line);

  color: inherit;

  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    padding-left .35s ease,
    background .35s ease;
}


.fo-detail-feature::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background: var(--fo-red);

  transform: scaleY(0);

  transition: transform .35s ease;
}


.fo-detail-number {
  color:
    rgba(255, 255, 255, .28);

  font-size: .72rem;
  font-weight: 900;

  letter-spacing: .10em;

  transition: color .35s ease;
}


.fo-detail-feature-copy {
  display: block;
}


.fo-detail-feature strong {
  display: block;

  margin-bottom: 8px;

  color: #fff;

  font-size: 1rem;

  transition:
    color .35s ease,
    transform .35s ease;
}


.fo-detail-feature small {
  display: block;

  max-width: 390px;

  color: var(--fo-muted);

  font-size: .8rem;

  line-height: 1.55;

  transition: color .35s ease;
}



/* Aktiver Punkt + Hover */

.fo-detail-feature:hover,
.fo-detail-feature.is-active,
.fo-detail-feature:focus-visible {
  padding-left: 18px;

  background:
    linear-gradient(
      90deg,
      rgba(241, 13, 27, .09),
      transparent
    );
}


.fo-detail-feature:hover::before,
.fo-detail-feature.is-active::before,
.fo-detail-feature:focus-visible::before {
  transform: scaleY(1);
}


.fo-detail-feature:hover
.fo-detail-number,
.fo-detail-feature.is-active
.fo-detail-number,
.fo-detail-feature:focus-visible
.fo-detail-number {
  color: var(--fo-red);
}


.fo-detail-feature:hover strong,
.fo-detail-feature.is-active strong,
.fo-detail-feature:focus-visible strong {
  color: var(--fo-red);

  transform: translateX(2px);
}


.fo-detail-feature:hover small,
.fo-detail-feature.is-active small,
.fo-detail-feature:focus-visible small {
  color: rgba(255, 255, 255, .78);
}



/* Bild */

.fo-detail-media {
  --detail-x: 50%;
  --detail-y: 50%;
  --detail-scale: 1.14;

  position: relative;

  min-height: 620px;

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    var(--fo-line);

  border-radius: 24px;

  background: #080a0b;

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, .30);
}


.fo-detail-image-window {
  position: absolute;

  inset: 0;

  overflow: hidden;
}


.fo-detail-image {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(
      var(--detail-scale)
    );

  transform-origin:
    var(--detail-x)
    var(--detail-y);

  transition:
    transform 1.4s
    cubic-bezier(.22, .7, .18, 1),
    transform-origin 1.2s ease,
    filter .8s ease;
}


.fo-detail-media::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, .42) 100%
    );
}



/* aktive Beschriftung */

.fo-detail-focus-label {
  position: absolute;

  right: 24px;
  bottom: 62px;

  z-index: 3;

  min-width: 230px;

  padding: 15px 18px;

  border:
    1px solid
    rgba(241, 13, 27, .33);

  border-radius: 13px;

  background:
    rgba(7, 8, 9, .76);

  backdrop-filter: blur(12px);

  box-shadow:
    0 16px 45px
    rgba(0, 0, 0, .32);
}


.fo-detail-focus-label span {
  display: block;

  margin-bottom: 4px;

  color: var(--fo-red);

  font-size: .64rem;
  font-weight: 900;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.fo-detail-focus-label strong {
  color: #fff;

  font-size: .9rem;
}


.fo-detail-media figcaption {
  position: absolute;

  right: 24px;
  bottom: 20px;
  left: 24px;

  z-index: 3;

  color:
    rgba(255, 255, 255, .55);

  font-size: .7rem;
}



/* ==========================================================
   HÄUFIGE FRAGEN
   aufgebaut wie beim Flyer
========================================================== */

.fo-faq-section {
  background:
    var(--fo-bg);
}



/* ==========================================================
   ÜBERSCHRIFT
========================================================== */

.fo-faq-heading {
  max-width: 850px;

  margin:
    0 0 44px;
}


.fo-faq-heading h2 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(
      2.35rem,
      4vw,
      4.45rem
    );

  font-weight: 700;

  line-height: .98;

  letter-spacing: -.045em;
}



/* ==========================================================
   FAQ LISTE
========================================================== */

.fo-faq-list {
  width: 100%;

  border-top:
    1px solid
    var(--fo-line);
}



/* ==========================================================
   EINZELNE FRAGE
========================================================== */

.fo-faq-item {
  width: 100%;

  border-bottom:
    1px solid
    var(--fo-line);
}



/* ==========================================================
   FRAGE
========================================================== */

.fo-faq-item summary {
  display: grid;

  grid-template-columns:
    1fr
    34px;

  gap: 20px;

  align-items: center;

  padding:
    26px 0;

  color: #fff;

  cursor: pointer;

  list-style: none;

  font-size: 1.26rem;

  font-weight: 800;
}


.fo-faq-item summary::-webkit-details-marker {
  display: none;
}



/* ==========================================================
   PLUS
========================================================== */

.fo-faq-item summary b {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  color:
    var(--fo-red);

  font-size: 1.45rem;

  font-weight: 500;

  transition:
    transform .25s ease,
    color .25s ease;
}



/* geöffnet = Plus wird zum X */

.fo-faq-item[open]
summary b {
  transform:
    rotate(45deg);
}



/* ==========================================================
   ANTWORT
========================================================== */

.fo-faq-item p {
  max-width: 900px;

  margin: 0;

  padding:
    0 54px 28px 0;

  color:
    var(--fo-muted);

  line-height: 1.72;
}


/* ==========================================================
   ABSCHLUSS / FOLIERUNG ANFRAGEN
   Aufbau wie bei INDIVIDUELLES
========================================================== */

.fo-final-section {
  padding-top: 72px;
  padding-bottom: 105px;
  background: var(--fo-bg);
}


/* ==========================================================
   ANFRAGE BOX
========================================================== */

.fo-final-card {
  position: relative;

  padding: clamp(42px, 5vw, 68px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(197,0,26,.13),
      transparent 38%
    ),
    rgba(255,255,255,.025);

  box-shadow:
    0 30px 70px rgba(0,0,0,.22);
}


/* Alte Deko der Folierungsbox komplett entfernen */

.fo-final-card::before,
.fo-final-card::after {
  display: none !important;
  content: none !important;
}


/* ==========================================================
   TEXTBEREICH
========================================================== */

.fo-final-copy {
  position: relative;
  z-index: 2;

  max-width: 850px;
}


.fo-final-copy h2 {
  margin: 0;

  color: #fff;

  font-size: clamp(2.4rem, 4vw, 4.35rem);

  line-height: 1;
  letter-spacing: -.045em;
}


.fo-final-copy > p:not(.fo-kicker) {
  max-width: 720px;

  margin: 22px 0 0;

  color: var(--fo-muted);

  line-height: 1.7;
}


/* ==========================================================
   BUTTON
========================================================== */

.fo-final-button {
  min-height: 56px;

  margin-top: 30px;

  padding: 16px 29px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: #f10d1b;

  border: 1px solid #f10d1b;
  border-radius: 999px;

  box-shadow:
    0 15px 35px rgba(241,13,27,.24);

  font-size: .94rem;
  font-weight: 850;

  text-decoration: none;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.fo-final-button:hover,
.fo-final-button:focus-visible {
  color: #fff;

  background: #c5001a;

  transform: translateY(-3px);

  box-shadow:
    0 20px 42px rgba(241,13,27,.32);

  outline: none;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 620px) {

  .fo-final-section {
    padding-top: 58px;
    padding-bottom: 74px;
  }

  .fo-final-card {
    padding: 32px 24px;
  }

  .fo-final-button {
    width: 100%;
  }

}



/* ==========================================================
   FOCUS
========================================================== */

body#folierung
button:focus-visible,
body#folierung
a:focus-visible,
body#folierung
summary:focus-visible,
body#folierung
.fo-hero-fact:focus-visible {
  outline:
    2px solid
    var(--fo-red);

  outline-offset: 5px;
}



/* ==========================================================
   RESPONSIVE – TABLET
========================================================== */

@media (max-width: 1180px) {

  .fo-page {
    padding-top: 86px;
  }


  .fo-hero-bg {
    width: 68%;
  }


  .fo-hero-content {
    width: min(600px, 58%);
  }


  .fo-use-grid {
    gap: 24px;
  }


  .fo-use-item--01
  .fo-use-image {
    height: 390px;
  }


  .fo-use-item--02
  .fo-use-image {
    height: 340px;
  }


  .fo-use-item--03
  .fo-use-image {
    height: 295px;
  }


  .fo-process-step:nth-of-type(2) {
    --fo-step-offset: 20px;
  }


  .fo-process-step:nth-of-type(3) {
    --fo-step-offset: 40px;
  }


  .fo-process-step:nth-of-type(4) {
    --fo-step-offset: 20px;
  }


  .fo-process-card {
    grid-template-columns:
      minmax(250px, .72fr)
      minmax(300px, 1fr);

    gap: 35px;
  }


  .fo-material-layout {
    grid-template-columns: 1fr;
  }


  .fo-material-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .fo-detail-stage {
    grid-template-columns:
      minmax(270px, .38fr)
      minmax(0, 1fr);

    gap: 35px;
  }


  .fo-detail-media {
    min-height: 550px;
  }


  .fo-faq-card {
    gap: 55px;
  }

}



/* ==========================================================
   <= 980
========================================================== */

@media (max-width: 980px) {

  .fo-page {
    padding-top: 82px;
  }


  .fo-hero {
    min-height: 680px;
  }


  .fo-hero-inner {
    min-height: 680px;
  }


  .fo-hero-bg {
    width: 74%;
  }


  .fo-hero-content {
    width: min(570px, 63%);
  }


  .fo-hero-facts {
    width: 100%;
  }


  .fo-hero-fact {
    padding: 17px 15px;

    grid-template-columns:
      30px
      minmax(0, 1fr);
  }


  .fo-use-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .fo-use-item--01 {
    grid-column: 1 / -1;
  }


  .fo-use-item--01
  .fo-use-image,
  .fo-use-item--02
  .fo-use-image,
  .fo-use-item--03
  .fo-use-image {
    height: 350px;
  }


  .fo-process-card {
    grid-template-columns:
      minmax(220px, .7fr)
      minmax(0, 1fr);
  }


  .fo-detail-stage {
    grid-template-columns: 1fr;
  }


  .fo-detail-features {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    border-top: 0;
  }


  .fo-detail-feature {
    min-height: 170px;

    padding: 20px;

    grid-template-columns: 1fr;

    border:
      1px solid
      var(--fo-line);
  }


  .fo-detail-feature + .fo-detail-feature {
    border-left: 0;
  }


  .fo-detail-feature:hover,
  .fo-detail-feature.is-active,
  .fo-detail-feature:focus-visible {
    padding-left: 20px;
  }


  .fo-detail-feature::before {
    top: auto;

    right: 0;
    bottom: 0;

    width: auto;
    height: 3px;

    transform: scaleX(0);
  }


  .fo-detail-feature:hover::before,
  .fo-detail-feature.is-active::before,
  .fo-detail-feature:focus-visible::before {
    transform: scaleX(1);
  }


  .fo-faq-card {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .fo-faq-intro {
    max-width: 620px;
  }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 720px) {

  .fo-page {
    padding-top: 76px;
  }


  .product-breadcrumb {
    min-height: 48px;

    font-size: .7rem;
  }


  /* Hero */

  .fo-hero {
    min-height: 820px;
  }


  .fo-hero-inner {
    min-height: 820px;

    padding-top: 34px;
    padding-bottom: 22px;
  }


  .fo-hero-bg {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 58%;

    object-position: 62% center;

    opacity: .68;
  }


  .fo-hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(5, 6, 7, .99) 0%,
        rgba(5, 6, 7, .96) 42%,
        rgba(5, 6, 7, .72) 59%,
        rgba(5, 6, 7, .30) 100%
      );
  }


  .fo-hero-services {
    margin-bottom: 30px;

    gap: 16px 24px;

    font-size: .69rem;
  }


  .fo-hero-content {
    width: 100%;

    max-width: 540px;
  }


  .fo-hero-content h1 {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4.6rem
      );
  }


  .fo-hero-facts {
    grid-template-columns: 1fr;
  }


  .fo-hero-fact {
    min-height: 0;
  }


  .fo-hero-fact:not(:last-child) {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, .11);
  }


  /* Sections */

  .fo-section {
    padding: 76px 0;
  }


  .fo-section-intro,
  .fo-detail-heading {
    margin-bottom: 38px;
  }


  .fo-section-intro h2,
  .fo-detail-heading h2,
  .fo-faq-intro h2,
  .fo-final-copy h2 {
    font-size:
      clamp(
        2.2rem,
        11vw,
        3.5rem
      );
  }


  /* Einsatz */

  .fo-use-grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .fo-use-item--01 {
    grid-column: auto;
  }


  .fo-use-item--01
  .fo-use-image,
  .fo-use-item--02
  .fo-use-image,
  .fo-use-item--03
  .fo-use-image {
    height: 330px;
  }


  /* Timeline */

  .fo-process-timeline {
    padding-left: 64px;

    gap: 18px;
  }


  .fo-process-line {
    left: 21px;
  }


  .fo-process-step,
  .fo-process-step:nth-of-type(2),
  .fo-process-step:nth-of-type(3),
  .fo-process-step:nth-of-type(4) {
    --fo-step-offset: 0px;
  }


  .fo-process-number {
    left: -64px;

    width: 44px;
    height: 44px;

    font-size: 1.2rem;
  }


  .fo-process-card {
    width: 100%;

    margin-left: 0;

    padding: 17px;

    grid-template-columns: 1fr;

    gap: 22px;
  }


  .fo-process-step.is-active
  .fo-process-card,
  .fo-process-step:hover
  .fo-process-card {
    transform: translateY(-2px);
  }


  .fo-process-image {
    height: 245px;
  }


  /* Materialien */

  .fo-material-tabs {
    grid-template-columns: 1fr;
  }


  .fo-material-panels,
  .fo-material-panel {
    min-height: 470px;
  }


  .fo-material-copy {
    padding: 28px 24px;
  }


  /* Detail */

  .fo-detail-features {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .fo-detail-feature,
  .fo-detail-feature + .fo-detail-feature {
    min-height: 0;

    border:
      1px solid
      var(--fo-line);

    border-radius: 13px;
  }


  .fo-detail-feature::before {
    border-radius:
      0 0 13px 13px;
  }


  .fo-detail-media {
    min-height: 470px;
  }


  .fo-detail-focus-label {
    right: 16px;
    bottom: 58px;
    left: 16px;

    min-width: 0;
  }


  .fo-detail-media figcaption {
    right: 16px;
    left: 16px;
  }


  /* FAQ */

  .fo-faq-card {
    padding: 30px 20px;
  }


  .fo-faq-item summary {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      30px;

    gap: 9px;
  }


  .fo-faq-answer p {
    padding:
      0 10px 22px 41px;
  }


  /* CTA */

  .fo-final-card {
    padding: 36px 24px;
  }


  .fo-final-button {
    width: 100%;
  }

}



/* ==========================================================
   KLEINE HANDYS
========================================================== */

@media (max-width: 430px) {

  .fo-hero {
    min-height: 860px;
  }


  .fo-hero-inner {
    min-height: 860px;
  }


  .fo-use-item--01
  .fo-use-image,
  .fo-use-item--02
  .fo-use-image,
  .fo-use-item--03
  .fo-use-image {
    height: 300px;
  }


  .fo-process-timeline {
    padding-left: 56px;
  }


  .fo-process-number {
    left: -56px;

    width: 40px;
    height: 40px;
  }


  .fo-process-line {
    left: 19px;
  }


  .fo-process-image {
    height: 220px;
  }


  .fo-detail-media {
    min-height: 420px;
  }

}



/* ==========================================================
   REDUZIERTE BEWEGUNG
========================================================== */

@media (prefers-reduced-motion: reduce) {

  body#folierung *,
  body#folierung *::before,
  body#folierung *::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}